<template>
<div>
<div><h1>
  修理厂管理
</h1></div>
<div>
  <el-input v-model="input" placeholder="请输入要查询的快修店店名" style="width:300px;"></el-input>
  <el-button type="primary" @click="xiulichangchaxun">查询</el-button>
</div>
<div>
  <el-button type="primary" @click="addrepairshop">添加修理厂</el-button>
</div>
  <el-table
    :data="xiulishoplist"
    style="width: 100%">
    <el-table-column
      label="编号"
      width="100">
      <template slot-scope="scope">
        <i class="code"></i>
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="店铺名称"
      width="100">
      <template slot-scope="scope">
        <i class="name"></i>
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="店铺短名称"
      width="100">
      <template slot-scope="scope">
        <i class="shortName"></i>
        <span style="margin-left: 10px">{{ scope.row.shortName }}</span>
      </template>
    </el-table-column>
        <el-table-column
      label="店铺主修车型"
      width="130">
      <template slot-scope="scope">
        <i class="Carmodel"></i>
        <span style="margin-left: 10px">{{ scope.row.majorModel }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="店铺折扣"
      width="120">
      <template slot-scope="scope">
        <i class="discount"></i>
        <span style="margin-left: 10px">{{ scope.row.discount }}</span>
      </template>
    </el-table-column>
        <el-table-column
      label="区域"
      width="180">
      <template slot-scope="scope">
        <i class="Carmodel"></i>
        <span style="margin-left: 10px">{{ scope.row.area }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="地址"
      width="190">
      <template slot-scope="scope">
        <i class="discount"></i>
        <span style="margin-left: 10px">{{ scope.row.address }}</span>
      </template>
    </el-table-column>
        <el-table-column
      label="是否签约"
      width="120">
      <template slot-scope="scope">
        <i class="Carmodel"></i>
        <span style="margin-left: 10px">{{ scope.row.isSigned?"是":"否" }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="totalCount"
        :page-size="size"
        @current-change="currentChange"
      >
      </el-pagination>
  </div>
</template>

<script>
  export default {
    created() {
    // 获取订单源
    this.getInit(this.page, this.size);
    // 
  },
    data() {
      return {
              totalCount: 0,

        xiulishoplist:[],
        page:1,
        size:4,
        input:""
        }
          
      },
    methods: {
         //分页
    currentChange(page) {
      console.log(this.size);
      console.log("分页", page);
      this.page = page;
      this.getInit(page, this.size);
    },
      //传值
      handleEdit(form) {
        //console.log('bianji',form)
        this.$router.push({path:"/content/shop/repairshop/change", query: {key: form}});
      },
      //删除
      handleDelete(id) {
       if(confirm("是否确认删除此项")){
        this.$http({
        url: "/repairDepot/deleteById",
        method: "POST",
        params: {
          id
          // token:'90ed9eefa96d4184b31c445148430d9b'
        }
      })
      .then((res) => {
         console.log(res.data)
          this.getInit(this.page, this.size);
         
      })
       }
        },
        //新增
      addrepairshop() {
        console.log(1111111);
        this.$router.push("/content/shop/repairshop/add");
      },
      xiulichangchaxun(){
        if(this.input==""){
              this.$message.error('请输入要查询的快修店店名');
        }else{
          
             this.inquiryRepairCar(this.input,this.page,this.size)
            
        }

      },
      inquiryRepairCar(name, page, size){
    this.$http({
      url: "/repairDepot/selectLikeNameByPage",
      method: "POST",
      params: {
        name,
        page,
        size,
      }
    })
      .then((res) => {
  this.xiulishoplist = res.data.data;

      })
      .catch((err) => {
        console.log('订单来源数据获取失败', err)
      })
  },

      //列表数据渲染
      getInit(page, size){
        this.$http({
        url: "/repairDepot/selectAllByPage",
        method: "POST",
        params: {
          page,
          size
          
          }
      })
      .then((res) => {
          this.totalCount = res.data.count;
        console.log('列表数据',res.data)
          this.xiulishoplist = res.data.data
      })
      .catch((err) => {
          console.log('订单来源数据获取失败', err)
        })
      }
    }
  }
  </script>